<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/tld/dictionary" prefix="dictionary"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>付款</title>
<link rel="stylesheet" href="${ctx}/static/css/style.css" type="text/css" /> 
<link rel="stylesheet" href="${ctx}/static/css/kongjian.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/static/css/jquery.ui.all.css" />
<link rel="stylesheet" href="${ctx}/static/css/m.css" />
<script src="${ctx}/static/script/jquery-1.4.min.js" type="text/javascript"></script>
<script src="${ctx}/static/script/jquery.ui.core.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/static/My97DatePicker/WdatePicker.js"></script>
<script src="${ctx}/static/script/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="${ctx}/static/script/jquery.form.js"></script>
<script src="${ctx}/static/script/jsCoreUtil.js"></script>
<script language="javascript">
function jine(str){
    if(!/^((\d{1,3}(,\d{3})*)|(\d+))(\.\d{1,2})?$/.test(str)) {  
        alert("请输入正确金额数!");
	}
}
var mainform3_page;
function bb(x){
	for(i=1;i<4;i++){
		document.getElementById("t"+i).style.display="none";
		document.getElementById("a_m"+i).style.background="#fff";
		}
		document.getElementById("t"+x).style.display="block";
		document.getElementById("a_m"+x).style.background="#c6defa";
		
		if(x==3){
			ajaxsubmitPayList();
		}	
	}
	
Date.prototype.pattern=function(fmt) {        
    var o = {        
    "M+" : this.getMonth()+1, //月份        
    "d+" : this.getDate(), //日        
    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时        
    "H+" : this.getHours(), //小时        
    "m+" : this.getMinutes(), //分        
    "s+" : this.getSeconds(), //秒        
    "q+" : Math.floor((this.getMonth()+3)/3), //季度        
    "S" : this.getMilliseconds() //毫秒        
    };        
    var week = {        
    "0" : "\u65e5",        
    "1" : "\u4e00",        
    "2" : "\u4e8c",        
    "3" : "\u4e09",        
    "4" : "\u56db",        
    "5" : "\u4e94",        
    "6" : "\u516d"     
    };        
    if(/(y+)/.test(fmt)){        
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));        
    }        
    if(/(E+)/.test(fmt)){        
            fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "\u661f\u671f" : "\u5468") : "")+week[this.getDay()+""]);        
    }        
    for(var k in o){        
            if(new RegExp("("+ k +")").test(fmt)){        
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));        
            }        
    }        
    return fmt;        
}

var dictionary = new CoreMap();
var hasRecommendSize=0;
var mainform3_page;
</script>

</head>

<body style="margin:10px;">
<form:form id="mainform1" action=""  modelAttribute="orderForm" method="post">
<input type="hidden" id="sysCurrentDate" name="sysCurrentDate" value="${orderForm.sysCurrentDate}" />	
<p style=" text-align:left; height:30px; padding:0 10px; line-height:30px; border:#3b97e4 solid 1px;">
交易单编号：${orderForm.id}
投资编号：${orderForm.investInfo.id}
购买人客户编号：${orderForm.investInfo.customerInfo.customerCode}
购买人客户姓名：${orderForm.investInfo.customerInfo.cnName}
交易金额：<fmt:formatNumber value="${orderForm.orderAmt}" pattern="##,###.##" /></p>
<div style="height:10px;"></div>
<p><a id="a_m1"  class="a_m">付款单信息</a><!-- onclick="bb(1)" -->
<a id="a_m2"  class="a_m" style="background:#fff; border-left:0;">付款单</a><!-- onclick="bb(2)" -->
<a id="a_m3"  class="a_m" style="background:#fff; border-left:0;">付款单列表</a></p><!-- onclick="bb(3)" -->
<div style="clear:both;"></div>
<div style=" border:#3b97e4 solid 1px; padding:10px 0 20px;" id="t1">

<table class="m_table">
	<tr>
        <td>订单编号：${orderForm.id}</td><td>投资编号：${orderForm.investInfo.id}</td>
	</tr>
	<tr>
        <td>客户编号：${orderForm.investInfo.customerInfo.customerCode}</td><td>客户姓名：${orderForm.investInfo.customerInfo.cnName}</td>
	</tr>
	<tr>
        <td>推荐对价金额：
        <fmt:formatNumber value=" ${orderForm.cashAmt}" pattern="##,###.##"></fmt:formatNumber>
       	</td><td>约定交割日期：<fmt:formatDate value="${orderForm.appointPaymentDate}"   pattern="yyyy-MM-dd" type="date" dateStyle="long" /></td>
	</tr>
	<tr>
        <td colspan="2">应付款金额：
        <fmt:formatNumber value="${orderForm.cashAmt}" pattern="##,###.##"></fmt:formatNumber>
        </td>
	</tr>
	<tr>
        <td colspan="2">已付款金额：
         <fmt:formatNumber value="${orderForm.paymentAmt}" pattern="##,###.##"/>
        （现金：
         <fmt:formatNumber value="${orderForm.paymentAmt}" pattern="##,###.##"></fmt:formatNumber>
        非现金：
        <fmt:formatNumber value="${orderForm.reinvestAmt}" pattern="##,###.##"></fmt:formatNumber>
           ）</td>
	</tr>
	<tr>
        <td colspan="2">待付款金额：
        <fmt:formatNumber value="${orderForm.orderAmt - orderForm.paymentAmt}" pattern="##,###.##"></fmt:formatNumber>
        </td>
	</tr>
	<tr>
	    <td colspan="2"><a href="#" onclick="bb(2)" class="btn1" style="margin-right:15px;">付款</a><a href="#" onclick="window.location=('${ctx}/order/tradeOrders');" class="btn1">取消</a></td>
	</tr>
</table>

</div>
</form:form>
<form:form id="mainform2" action="#" modelAttribute="billForm" method="post" >
<div style=" border:#3b97e4 solid 1px; padding:10px 0 20px;" id="t2">
<div id="output2"></div>
<input type="hidden" id="ftOrderMain.id" name="ftOrderMain.id" value="${orderForm.id}" />	
<input type="hidden" id="payBankInfo.id" name="payBankInfo.id" value="${orderForm.investInfo.payBankInfo.id}" />	
<input type="hidden" id="recBankInfo.id" name="recBankInfo.id" value="${orderForm.recbankInfo.id}" />	
<input type="hidden" id="id" name="id" value="${id}" />	
<input type="hidden" id="remittanceBillId" name="remittanceBillId" value="${billForm.remittanceBillId}" />	
<input type="hidden" id="billType" name="billType" value="1" />	
<font color="red"><div id="errorMsg"></div></font>
<table class="m_table">
	<tr>
        <td colspan="2">交易单编号：${orderForm.id}</td>
	</tr>
	<tr>
        <td>付款人姓名：${orderForm.investInfo.customerInfo.cnName}</td><td>汇入人姓名：${orderForm.receivablesCustomerInfo.cnName}</td>
	</tr>
	<tr>
        <td colspan="2">款项类型：
		<form:radiobutton path="payType" id="payType" name="payType" value="01" checked="true"/>现金
		<form:radiobutton path="payType" id="payType" name="payType" value="02" />非现金<br><div id="payTypediv" style="display:none;">
		</td>
	</tr>
	<tr>
        <td>
		    汇出账户：
		<select id="payBankAccId_select" name="payBankAccId_select" onclick="javascript:setPayBlankInfo(this.options[this.selectedIndex].value);">
			<c:forEach items="${orderForm.investInfo.customerInfo.bankInfos}" var="item">
				<c:if test="${item.status==1}">
					<c:if test="${item.id==orderForm.investInfo.payBankInfo.id}">
						<option selected value="${item.id}|${item.accNo}|${item.bankName}|${item.subbranch}|${orderForm.investInfo.customerInfo.cnName}"><dictionary:display code="${item.bankName}"/>${item.subbranch}</option>
					</c:if>
					<c:if test="${item.id!=orderForm.investInfo.payBankInfo.id}">
						<option value="${item.id}|${item.accNo}|${item.bankName}|${item.subbranch}|${orderForm.investInfo.customerInfo.cnName}"><dictionary:display code="${item.bankName}"/>${item.subbranch}</option>
					</c:if>
				</c:if>
			</c:forEach>
		</select>
		</td>
		<td>
		    汇入账户：
		<select id="recBankAccId_select" name="recBankAccId_select" onclick="javascript:setRevBlankInfo(this.options[this.selectedIndex].value);">
			<c:forEach items="${orderForm.receivablesCustomerInfo.bankInfos}" var="item">
				<c:if test="${item.status==1}">
					<c:if test="${item.id==orderForm.recbankInfo.id}">
						<option selected value="${item.id}|${item.accNo}|${item.bankName}|${item.subbranch}|${orderForm.receivablesCustomerInfo.cnName}"><dictionary:display code="${item.bankName}"/>${item.subbranch}</option>
					</c:if>
					<c:if test="${item.id!=orderForm.recbankInfo.id}">
						<option value="${item.id}|${item.accNo}|${item.bankName}|${item.subbranch}|${orderForm.receivablesCustomerInfo.cnName}"><dictionary:display code="${item.bankName}"/>${item.subbranch}</option>
					</c:if>
				</c:if>
			</c:forEach>
		</select>
		</td>
	</tr>
	<tr>
        <td>汇出账户名：<input id="pay_username_blank" value="${orderForm.investInfo.customerInfo.cnName}" readonly="true"/></td>
		<td>汇入账户名：<input id="rev_username_blank" value="${orderForm.receivablesCustomerInfo.cnName}" readonly="true"/>  </td>
	</tr>
	<tr>
        <td>汇出账户：<input id="payBankInfo.accNo" value="${orderForm.investInfo.payBankInfo.accNo}" readonly="true"/><div id="payBankInfo.accNodiv" style="display:none;"><font color="red">汇出账户不能为空!</font></div></td>
		<td>汇入账户：<input id="recBankInfo.accNo" value="${orderForm.recbankInfo.accNo}" readonly="true"/><div id="recBankInfo.accNodiv" style="display:none;"><font color="red">汇入账户不能为空!</font></div></td>
	</tr>
	<tr>
        <td>汇出银行：<input id="pay_blank_name" value="<dictionary:display code="${orderForm.investInfo.payBankInfo.bankName}"/>${orderForm.investInfo.payBankInfo.subbranch}" readonly="true"/>	</td>
		<td>汇入银行：<input id="rev_blank_name" value="<dictionary:display code="${orderForm.recbankInfo.bankName}"/>${orderForm.recbankInfo.subbranch}" readonly="true"/>     </td>
	</tr>
	<tr>
        <td colspan="2">汇出金额：<input id="amt" name="amt" onblur='jine(this.value)'  value="<fmt:formatNumber value="${orderForm.orderAmt - orderForm.paymentAmt}" pattern="#0.##" />" /></td>
	</tr>
	<tr>
        <td colspan="2">
    汇出日期：<input type="text" id="payDate" name="payDate"   value="${billForm.payDate}" onClick="WdatePicker()" size="10"/><form:errors path="payDate" cssClass="bind-error"/>    
 </td>
	</tr>
	<tr>
        <td colspan="2" valign="middle"><span style="float:left;">备注：</span><textarea style="width:500px; height:80px;" id="memo" name="memo">${billForm.memo}</textarea></td>
	</tr>
	<tr>
	    <td colspan="2"><a href="#" onclick="paysubmit();" class="btn1" style="margin-right:15px;">确认</a><a href="#" onclick="bb(1);" class="btn1">取消</a></td>
	</tr>
</table>

</div>
</form:form>
<form:form id="mainform3" action="/bill/bill_list" modelAttribute="billForm"  method="post">
<div style=" border:#3b97e4 solid 1px; padding:10px 0 20px;" id="t3">
	<div id="output3"></div>
		<input type="hidden" id="orderId" name="orderId" value="${orderForm.id}" />
			<div class="yiban">
			<p id="mainform3table_div"></p>
			</div>
<div class="ggkj_pagecontainer">
  <div class="ggkj_pageBGleft">
    	<span class="ggkj_pageBGright"></span>
    	<a href="javascript:jumpPage2(1)" class="ggkj_pageUpa">
        
        </a>
        <a href="javascript:jumpPage2(mainform3_page.prePage)" class="ggkj_pageUp">
        
        </a>
        <span class="ggkj_insertline"></span>
        <span class="ggkj_pageSpan">
        	页
        	<input type="text" id="pageNo" name="pageNo" value="1" class="ggkj_inputtext_30"/>OF <span id="totalPages3"></span>
        </span>
        <span class="ggkj_insertline"></span>
        <a href="javascript:jumpPage2(mainform3_page.nextPage)" class="ggkj_pageDown">
        
        </a>
        <a href="javascript:jumpPage2(mainform3_page.totalPages)" class="ggkj_pageDowna">
        
        </a>
        <span class="ggkj_insertline"></span>
    </div>
</div>
</form:form>
</div>
</div>
<script>
/** 付款单 start*/
function mainform2Response(responseText){
	if(responseText.errorMsg==null){
		document.getElementById('errorMsg').style.display='none';	
    	ajaxsubmitPayList();
    	bb(3);
	}else{
		document.getElementById('errorMsg').style.display='';
		document.getElementById('errorMsg').innerHTML=responseText.errorMsg;
	}
}

function paysubmit(){
	var amt=document.getElementById("amt").value;
	 if(!/^((\d{1,3}(,\d{3})*)|(\d+))(\.\d{1,2})?$/.test(amt)) {  
	        alert("请输入正确金额数!");
	        return;
		}
		var payDate=document.getElementById("payDate");
		var sysCurrentDate = document.getElementById('sysCurrentDate');
		if(payDate.value==""){
			alert("汇出日期不能为空！");
			return;
		}else{
			var arr = payDate.value.split("-");
			var sysCurrentDateArr=sysCurrentDate.value.split("-");
			var converted =new Date(arr[0], arr[1]-1, arr[2]); 
			var myDate = new Date(sysCurrentDateArr[0], sysCurrentDateArr[1]-1, sysCurrentDateArr[2]);
			var myDates=myDate.getTime();	
			var converteds = converted.getTime();
			if(converteds>myDates){
				alert("汇出日期不能大于今天！");
				return;
			}   
		}
		
	if(!paysubmitinit()){
		return ;
	}
	var options = {   
        target:     '#output2',   // target element(s) to be updated with server response   
        success: mainform2Response,
        url:        '${ctx}/bill/bill_add',      // override for form's 'action' attribute   
        type:       'post'       // 'get' or 'post', override for form's 'method' attribute   
    };   
     function submitt() {
        re = /^\d+(?=\.{0,1}\d+$|$)/
		if($("#memo").val().length>50){
		    alert("备注不能超过50个字符！");
		}else if (!re.test($("#amt").val()) || Number($("#amt").val())<0.01 ) {
		    alert("汇出金额有误(汇出金额必须符合目前货币面值)!");
		}else {		
        	$('#mainform2').ajaxSubmit(options);  
		};      
        return false;   
    };
    submitt();
    
}
/** 付款单 end*/

/** 付款单列表 start*/
function mainform3Title(){
var th = "<tr>";
 th= th + '<th scope="col">序号</th>'
 th= th + '<th scope="col">订单编号</th>'
 th= th + '<th scope="col">付款单编号</th>'
 th= th + '<th scope="col">汇出账户名</th>'
 th= th + '<th scope="col">汇出银行</th>'
 th= th + '<th scope="col">汇出账号</th>'
 th= th + '<th scope="col">汇出金额</th>'
 th= th + '<th scope="col">约定付款日期</th>'
 th= th + '<th scope="col">实际付款日期</th>'
 th= th + '<th scope="col">状态</th>'
 th= th +'</tr>';
  return th;
}
function mainform3InserRows(tbIndex,data){
	 if(data==null || data.ftOrderMain==null ||data.payBankInfo==null || data.payBankInfo==null){
	 	alert('数据库数据存在异常，非空值含有空情况!');
	 	return false;
	 }
	 var cssName = '';
	 var td = '';
	 if(Number(tbIndex)%2==1){
	 	cssName = 'ggkj_tdColr';
	 }else{
	 	cssName = '';
	 }
	td = td + "<tr class='"+cssName+"' >";
	 td = td + "<td>"+tbIndex+"</td>";
	 td = td + "<td>"+data.ftOrderMain.id+"</td>";
	 td = td + "<td>"+data.id+"</td>";
	 td = td + "<td>"+(data.payBankInfo.accName)+"</td>";
	 td = td + "<td>"+dictionary.get(data.payBankInfo.bankName)+data.payBankInfo.subbranch+"</td>";//data.payBankInfo.bankName
	 td = td + "<td>"+data.payBankInfo.accNo+"</td>";//data.payBankInfo.accNo
	 td = td + "<td>"+formatCurrency(data.amt)+"</td>";
	 td = td + "<td>"+(new Date(data.ftOrderMain.appointPaymentDate)).pattern("yyyy-MM-dd")+"</td>";
	 td = td + "<td>"+(new Date(data.payDate)).pattern("yyyy-MM-dd")+"</td>";
	 //td = td + "<td>"+dictionary.get(data.ftOrderMain.investInfo.loanReturnDate)+"</td>";
	 td = td + "<td>"+dictionary.get(data.ftOrderMain.flowId)+"</td>";
	 return td;
}

function mainform3Response(responseText, statusText, xhr, $form){
	var thisformm = document.getElementById('mainform3');
	mainform3_page = responseText;
	var table ='<table style="width:100%;" class="ggkj_table"  border="0" cellspacing="0" cellpadding="0">';
	table = table + mainform3Title();
	if(mainform3_page!=null){
		thisformm.pageNo.value=mainform3_page.pageNo;
		$('#totalPages3').text(responseText.totalPages);
		for(var i=0;i<responseText.result.length;i++){
			table = table + mainform3InserRows(i+1,responseText.result[i]);
		}
	}
	table = table + '</table>';
	document.getElementById('mainform3table_div').innerHTML = table;
}
function jumpPage2(pageNo) {
	var thisform = document.getElementById('mainform3');
	thisform.pageNo.value = pageNo.toString();
	ajaxsubmitPayList();
}
function ajaxsubmitPayList(){
    var options = {   
        target:        '#output3',   // target element(s) to be updated with server response   
        success:       mainform3Response, // post-submit callback   
        url:        '${ctx}/bill/bill_list',      // override for form's 'action' attribute   
        type:       'post',       // 'get' or 'post', override for form's 'method' attribute   
        dataType:   'json',       // 'xml', 'script', or 'json' (expected server response type)
        timeout: 10000   
    };   
    function submitt() {   
        $('#mainform3').ajaxSubmit(options);   
        return false;   
    };  
    submitt();
}
/** 付款单列表 end*/


function paysubmitinit(){
	
	if(document.getElementById('payBankInfo.accNo').value==null||document.getElementById('payBankInfo.accNo').value==''){
		document.getElementById('payBankInfo.accNodiv').style.display = '';
		return false;
	}else{
		document.getElementById('payBankInfo.accNodiv').style.display = 'none';
	}
	if(document.getElementById('recBankInfo.accNo').value==null||document.getElementById('recBankInfo.accNo').value==''){
		document.getElementById('recBankInfo.accNodiv').style.display = '';
		return false;
	}else{
		document.getElementById('recBankInfo.accNodiv').style.display = 'none';
	}
	return true;
}

function setRevBlankInfo(info){
	var infos = info.split('|');
	document.getElementById ('recBankInfo.id').value=infos[0];
	document.getElementById ('recBankInfo.accNo').value=infos[1];
	document.getElementById ('rev_blank_name').value=dictionary.get(infos[2])+infos[3];
	document.getElementById ('rev_username_blank').value=infos[4];
}

function setPayBlankInfo(info){
	var infos = info.split('|');
	document.getElementById ('payBankInfo.id').value=infos[0];
	document.getElementById ('payBankInfo.accNo').value=infos[1];	
	document.getElementById ('pay_blank_name').value=dictionary.get(infos[2])+infos[3];
	document.getElementById ('pay_username_blank').value=infos[4];	
}  

function setOptionOnclick(){
	//payBankAccId_select;
	var pay = document.getElementById ('payBankAccId_select');
	var rec = document.getElementById ('recBankAccId_select');
	
}
$(document).ready(function() { 
	dictionary = dictionaryInit();
	
}); 


</script>
</body>
</html>
